<template>
	<view class="content">
		<ZPaging
		    ref="paging"
		    v-model="list"
			:auto="false"
		    :auto-show-system-loading="true"
			system-loading-text="Loading"
			loading-more-no-more-text="沒有更多了"
			loading-more-default-text="點擊加載更多"
			loading-more-loading-text="正在加載..."
			loading-more-fail-text="加載失敗,點擊重新加載"
			empty-view-text="沒有數據哦~"
			refresher-default-text="繼續下拉刷新"
			refresher-pulling-text="鬆開立即刷新"
			refresher-refreshing-text="正在刷新"  
			empty-view-reload-text="重新加載"
			empty-view-error-text="加載失敗"
		    @query="queryList"
		>
		     <template #top>
		        <NavBar :title="title" :autoBack="false" id="nav">
		        </NavBar>
		    </template>
		    <template #default>
				<view class="widths">
					<view class="list">
						<view class="item" v-for="(v,k) in list" :key="k">
							<view class="title">{{v.casename}}</view>
							<view v-if="v.devicelist && v.devicelist.list.length>0" class="flex subitem" >
								<view class="info"  v-for="(sv,sk) in v.devicelist.list" :key="sk" @click="toViewVideo(sv.online,sv.deviceId,v.caseid)">
									<view class="center pic">
										<view v-if="!sv.online && sv.noDevice==0" class="center offtxt">離線</view>
										<view v-if="sv.noDevice" class="center offtxt">未知</view>
										<u-image class="img" :src="sv.img"  height="200rpx" width="220rpx" mode="aspectFill" loading-icon="../../static/load.gif" error-icon="../../static/img05.png"></u-image>
									</view>
									<view class="flex nambox">
										<view class="text-cut name">
											{{sv.device_name}}
										</view>
										<!-- <view v-if="v.ident == 1" class="flex acbox">
											<u-icon v-if="v.ident == 1" class="mr-8" name="edit-pen-fill" color="#007aff" size="30" @click.stop="toEdit(v,sk,sv.devicelistid)"></u-icon>
											<u-icon name="trash-fill" color="#f00" size="30"></u-icon>
										</view> -->
									</view>
									<view class="editbox" v-if="v.ident == 1" @click.stop="toEdit(v,sk,sv.devicelistid)">
										<u-icon  class="editicon mr-12" name="edit-pen-fill" color="#fff" size="34" ></u-icon>
									</view>
									<view class="delbox" v-if="v.ident == 1"  @click.stop="toDel(v,sk,sv.devicelistid)">
										<u-icon class="delicon" name="trash-fill" color="#fff" size="34" ></u-icon>
									</view>
									
								</view>
								
							</view>
							<view v-if="!v.devicelist || v.devicelist.list.length==0" class="nolist">
								<view class="c999 center mt-20 nodata">暫無數據</view>
							</view>
							<view v-if="v.ident == 1" class="center mt-20 btnbox">
								<view class="cfff f24 btn" @click="toBindDevice(v.caseid)">綁定設備</view>
							</view>
						</view>
					</view>
				</view>
		        
		
		    </template>
		 </ZPaging>
		<Tabar></Tabar>
		
		<u-popup v-model="showBindDevice" mode="center" border-radius="16">
			<view class="bindDeviceBox">
				<view class="formbox">
					<!-- <view class="flex item">
						<view class="label">設備名稱：</view>
						<view class="val">
							<u-input class="input" :show-confirmbar="false" v-model="devicename" maxlength=64 type="text" placeholder="請輸入設備名稱" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
						</view>
					</view>
					<view class="flex item">
						<view class="label">設備編碼：</view>
						<view class="val">
							<u-input class="input" disabled  :show-confirmbar="false" v-model="deviceno" maxlength=64 type="text" placeholder="請輸入設備編碼" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
						</view>
					</view> -->
					<view class="tips">{{rtmpurl}}</view>
					<view class="f24 c999 actips">將上面的地址複製并設置到攝像機的RTMP推流設置中的IP地址中(僅支持攝像機)</view>
					<view class="center mt-20 subitem">
						<view class="f24 bg-007aff cfff sub" @click="copyurl">複製</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 刪除 -->
		<u-modal v-model="delShow" :show-title="false" :mask-close-able="true" content="確認刪除該設備嗎？"
		:show-cancel-button="true"
		confirm-text="確定"
		@confirm="delDevice"
		></u-modal>
		<!-- 綁定提示 -->
		<u-modal v-model="showbindTips" :show-title="false" :mask-close-able="true" :content="bindcontent"
		:show-cancel-button="true"
		confirm-text="確定"
		@confirm="confirmBindDevice"
		></u-modal>
		<!-- 綁定框 -->
		<u-popup v-model="showConfirmBindDevice" mode="center" border-radius="16">
			<view class="bindDeviceBox">
				<view class="formbox">
					<view class="flex item">
						<view class="label">設備名稱：</view>
						<view class="val">
							<u-input class="input" :show-confirmbar="false" v-model="devicename" maxlength=64 type="text" placeholder="請輸入設備名稱" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
						</view>
					</view>
					<view class="flex item">
						<view class="label">設備編碼：</view>
						<view class="val">
							<u-input class="input" disabled  :show-confirmbar="false" v-model="deviceno" maxlength=64 type="text" placeholder="請輸入設備編碼" placeholder-style="color:#e0e0e0;font-size:24rpx;" />
						</view>
					</view>
					<view class="center mt-20 subitem">
						<view class="f24 bg-007aff cfff sub" @click="saveDevice">綁定</view>
					</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import { mapState, mapMutations } from "vuex";
	import Tabar from "@/component/HomeTab"
	import NavBar from "@/component/NavBar"
	import ZPaging from "@/node_modules/z-paging/components/z-paging/z-paging.vue"
	import { baseUrl,videoImgBaseUrl,tlUrl } from "@/api/url.js"
	import { getVideolist,refreshVideoToken,bindDeviceToCase,delDeviceById,getnetworkcameraid } from "@/api/apis.js"
	var passwordRegex = /^[a-zA-Z0-9_]{6,16}$/;
	export default {
		components:{
			Tabar,
			NavBar,
			ZPaging
		},
		data() {
			return {
				videoImgBaseUrl: videoImgBaseUrl,
				title:"攝像機",
				list:[],
				showBindDevice:false,
				devicename:"",
				deviceno:"",
				curCaseid:"",
				curDevicelistId:"",
				defaultAction:'add',
				delInfo:{
					devicelistid:"",
					curCaseid:"",
				},
				delShow:false,
				rtmpurl:"",
				uuid:"",
				showbindTips:false,
				bindcontent:"",
				showConfirmBindDevice:false
			}
		},
		onShow(){
			this.setTabList(uni.getStorageSync("bindevice"))
			this.$nextTick(()=>{
				if(uni.getStorageSync("islogin")){
					this.ident=parseInt(uni.getStorageSync("ident")) 
					if(uni.getStorageSync('name')){
						this.changeUserName(uni.getStorageSync('name'))
					}
					this.reload()
				}else{
					this.$Toast("請先登錄")
					setTimeout(()=>{
						this.toPage("Home")
					},1200)
				}
			})
		},
		onLoad() {
			// refreshVideoToken().then((res)=>{
			// 	console.log('res',res)
			// }).catch((err)=>{
			// 	console.log('err')
			// })
		},
		computed: {
			...mapState(["userinfo"]),
		},
		methods: {
			...mapMutations(['chageUserPageType','chageUserPageId','changeUserIdent','changeUserName','setTabList']),
			reload(){
				this.$refs.paging.reload()
			},
			queryList(pageNo,pageSize){
				let data = {
					pageNo,
					pageSize,
					uid:uni.getStorageSync("uid"),
					vtoken:uni.getStorageSync("vtoken")
				}
				getVideolist(data).then((res)=>{
					this.$refs.paging.complete(res.list)
					if(res.vtoken){
						uni.setStorageSync('vtoken',res.vtoken)
					}
				}).catch((err)=>{
					if(err.code === 102){
						this.$ClearLogin(err.msg)
					}else{
						this.$Toast(err.msg)
					}
				})
				
			},
			toViewVideo(status,id,caseid){
				// if(status){
					this.toPage("Live",{status,id,caseid})
				// }
			},
			copyurl(){
				let _this=this;
				uni.setClipboardData({
					data: _this.rtmpurl,
					success: function () {
						_this.$Loading()
						_this.showBindDevice = false
						setTimeout(()=>{
							uni.hideLoading()
							_this.bindDevice()
						},1200)
						
					},
					fail: function (err) {
						_this.$Toast("複製失敗")
					},
					complete: function(){
						setTimeout(()=>{
							_this.showBindDevice = false
						},1200)
					}
				});
			},
			bindDevice(){
				this.bindcontent = "確認綁定"+this.uuid+"設備嗎?"
				this.showbindTips = true;
				
			},
			confirmBindDevice(){
				this.showbindTips = false
				this.deviceno = this.uuid
				this.showConfirmBindDevice = true
			},
			toBindDevice(cid){
				this.curCaseid = cid
				this.$Loading()
				let data = {
					uid:uni.getStorageSync("uid"),
					caseid:cid,
				}
				getnetworkcameraid(data).then((res)=>{
					this.rtmpurl = tlUrl+res.url
					this.uuid = res.uuid
					this.showBindDevice = true
					this.defaultAction = 'add'
					this.curDevicelistId = ''
				}).catch((err)=>{
					this.$Errback(err.msg)
					// console.log('err',err)
				}).finally(()=>{
					uni.hideLoading()
				})
				
			},
			toEdit(v,sk,devicelistid){
				this.devicename = v.devicelist.list[sk].device_name
				this.deviceno = v.devicelist.list[sk].deviceId
				this.curCaseid = v.caseid
				this.curDevicelistId = devicelistid
				this.defaultAction = 'edit'
				this.showBindDevice = true
			},
			toDel(v,sk,devicelistid){
				this.delInfo.devicelistid = devicelistid
				this.delInfo.caseid = v.caseid
				this.delShow = true
			},
			delDevice(){
				let data = {
					caseid:this.delInfo.caseid,
					uid:uni.getStorageSync("uid"),
					did:this.delInfo.devicelistid
				}
				this.delShow = false
				this.$Loading()
				delDeviceById(data).then((res)=>{
					this.$Toast(res.msg)
					setTimeout(()=>{
						this.reload()
					},1200)
				}).catch((err)=>{
					this.$Toast(err.msg)
				}).finally(()=>{
					uni.hideLoading()
				})
			},
			saveDevice(){
				if(!this.devicename){
					this.$Toast('請輸入設備名稱');
					return;
				}
				// if(!this.deviceno){
				// 	this.$Toast('請輸入設備編號');
				// 	return;
				// }
				let data = {
					caseid:this.curCaseid,
					uid:uni.getStorageSync("uid"),
					devicename:this.devicename,
					deviceno:this.deviceno,
				}
				if(this.defaultAction == 'edit') data.devicelistid = this.curDevicelistId
				this.$Loading()
				bindDeviceToCase(data).then((res)=>{
					this.$Toast(res.msg)
					setTimeout(()=>{
						this.reload()
					},1200)
				}).catch((err)=>{
					this.$Toast(err.msg)
				}).finally(()=>{
					this.showConfirmBindDevice = false
					uni.hideLoading()
				})
				
				
			},
			toPage(name,params={}){
				this.$navi({
				    route:{
				        name,
						params
				    },
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.content{
		min-height: 100vh;
	}
	.list{
		padding-top: 88rpx;
		padding-bottom: 100rpx;
		.item{
			padding-top: 20rpx;
			.title{
				background-color: #f2f2f2;
				padding: 8rpx 16rpx;
				color: #666;
				position: relative;
				&::before{
					content:"";
					width: 4rpx;
					height: 30rpx;
					background-color: #666;
					display: inline-block;
					position: absolute;
					left:0;
					top: 14rpx;
				}
			}
			.subitem{
				margin-top: 20rpx;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: flex-start;
				.info{
					width: 32%;
					margin-right: 2%;
					margin-top: 10rpx;
					margin-bottom: 10rpx;
					position: relative;
					&:nth-child(3n){
						margin-right: 0;
					}
					.pic{
						width: 100%;
						position: relative;
						overflow: hidden;
						border-radius: 4rpx;
						overflow: hidden;
						.img{
							width: 100%;
						}
						.offtxt{
							position: absolute;
							width: 100%;
							height: 200rpx;
							background: rgba(0, 0, 0, .25);
							z-index: 3;
							color: #fff;
						}
						
					}
					.nambox{
						width: 100%;
						.name{
							font-size: 28rpx;
							margin-top: 4rpx;
							width: calc(100% - 75rpx);
						}
						.acbox{
							width: 70rpx;
							flex-shrink: 0;
						}
					}
					.editicon{
						position: absolute;
						z-index: 4;
						right: 40rpx;
						bottom: 50rpx;
					}
					.delicon{
						position: absolute;
						z-index: 4;
						right: 10rpx;
						bottom: 50rpx;
					}
					
				}
			}
			.nolist{
				color: #999;
			}
			.btnbox{
				.btn{
					padding: 14rpx 20rpx;
					border-radius: 8rpx;
					background-color: #007aff;
				}
			}
		}
		
	}
	.bindDeviceBox{
		padding: 60rpx 30rpx;
		.formbox{
			width: 100%;
			.tips{
				word-break: break-all;
				margin-bottom: 5px;
				width: 600rpx;
			}
			.actips{
				width: 600rpx;
			}
			.item{
				align-items: center;
				margin-bottom: 30rpx;
				.val{
					border: 2rpx solid #f5f5f5;
					padding: 4rpx 20rpx;
					border-radius: 8rpx;
					
				}
			}
			.subitem{
				.sub{
					padding: 14rpx 40rpx;
					border-radius: 8rpx;
					background-color: #007aff;
				}
			}
		}
	}
</style>
